import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider, WeaRightMenu, WeaNewScroll, WeaInputNumber, WeaBrowser, WeaTextarea, WeaAlertPage, WeaTagGroup, WeaDatePicker, WeaCheckbox, WeaDialog } from 'ecCom';
import { Row, Button, Col, Input, Select, Icon, Spin } from 'antd';
import { observable, action, toJS } from 'mobx';
import Collapse from '../../public/collapse.js';
import sendApi from '../../apis/sendSms';
import AlertModal from '../../public/AlertModal';
import SmsTempList from '../SmsTemplate/TempList';
import moment from 'moment';

const Option = Select.Option;
const getLabel = WeaLocaleProvider.getLabel;

@inject('sendSmsStore')
@inject('smsTempStore')
@inject('smsRegularStore')
@observer
class ViewRegularMemberInfo extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			showAddBtn: true,
			showTemp: false,
			clickFlag: true,
			regularDateTime: moment().format('YYYY-MM-DD HH:MM'),
			visible: false,
		};
	}
	componentDidMount() {

	}
	componentWillReceiveProps(nextProps) {
		const { smsRegularStore } = nextProps;
		this.setState({ visible: nextProps.visible });
	}

	render() {
		const { sendSmsStore, smsRegularStore } = this.props;
		const { receiverType } = sendSmsStore;
		const { regularMemberInfoVisible } = smsRegularStore;
		const collectParams = {
			favname: `${getLabel('519174', '定时发送短信列表')}`,
			objid: 0,
			link: 'wui/index.html#/main/sms/smsRegular',
			importantlevel: 1,
		};
		let dialogHeight = receiverType == '1' ? 500 : 200;
		let dialogWidth = receiverType == '1' ? 900 : 600;
		return (<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@mz7m34`}
  visible={regularMemberInfoVisible}
  title={getLabel(519549, '编辑短信')}
  icon="icon-coms-message"
  iconBgcolor="#0079de"
  className="createWorkPlan"
  buttons={this.getMemberInfoBtn()}
  moreBtn={{
				collectParams,
			}}
  style={{ width: dialogWidth, height: dialogHeight }}
  onCancel={this.doClose}
		>
			<div className="sms-editSms" style={{ height: '100%' }} onClick={this.pageClick.bind(this)}>
				<SmsTempList ecId={`${this && this.props && this.props.ecId || ''}_SmsTempList@4717l1`}
  visible={sendSmsStore.showFlag}
  doRefresh={this.doRefresh}
  doClose={() => {
						sendSmsStore.closeTempList();
					}}
				/>
				{this.getEditSms()}
			</div>
		</WeaDialog>
		);
	}

	getMemberInfoBtn = () => {
		const { sendSmsStore } = this.props;
		const { receiverType, sendStatus, messageStatus, loading } = sendSmsStore;
		let btns = [];
		if ((sendStatus == '1' || sendStatus == '2') && messageStatus == '0') {
			btns.push(
				<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@fodwqr@saveBtn`}
  type="primary"
  loading={loading}
  onClick={() => {
						this.saveMemberInfo();
					}}
				>{getLabel(86, '保存')}</Button>,
			);
		}
		btns.push(
			<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sajlky@deleteBtn`}
  type="primary"
  loading={loading}
  onClick={() => {
					this.deleteMemberInfo();
				}}
			>{getLabel(91, '删除')}</Button>,
		);
		return btns;
	}

	saveMemberInfo = () => {
		const { sendSmsStore, smsRegularStore } = this.props;
		const { regularMemberId, receiverType } = smsRegularStore;
		const { msg, receiverNumber } = sendSmsStore;
		const params = { msg, receiverNumber, id: regularMemberId, receiverType };
		if (receiverType == '1' && !msg) {
			AlertModal(getLabel(384506, '短信内容不能为空！'));
			return;
		}
		if (!receiverNumber) {
			AlertModal(getLabel(519603, '电话号码不能为空！'));
			return;
		}
		this.props.onSave && this.props.onSave(params);
	}

	deleteMemberInfo = () => {
		const { sendSmsStore, smsRegularStore } = this.props;
		const { regularMemberId } = smsRegularStore;
		this.props.doDelete(regularMemberId);
	}

	getEditSms() {
		const { sendSmsStore } = this.props;
		const { receiverType, sendStatus, receiverNumber, messageStatus, msg } = sendSmsStore;
		let viewAttr = ((sendStatus == '1' || sendStatus == '2') && messageStatus == '0') ? 3 : 1;
		let offset = 4;
		let titlecol = 4;
		let fieldcol = 10;
		let marginBottomValue = 16;
		const contentStyle = {
			display: this.state.showTemp ? 'block' : 'none',
		};

		if (!this.state.showAddBtn) contentStyle['border-bottom'] = 0;

		return (
			<div style={{ height: '100%' }} className="">
				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cgrtds`} className="" style={{ marginBottom: `${marginBottomValue}px`, paddingTop: `${marginBottomValue}px` }}>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gdwluz`} offset={offset} span={titlecol} >
						<span>{getLabel(129048, '电话号码')}: </span>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7h9vfb`} span={fieldcol} style={{ marginLeft: '43px' }}>
						<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@z6cp7k`} viewAttr={viewAttr} value={receiverNumber} onChange={value => this.onChange(value, 'receiverNumber')} step={1} />
					</Col>
				</Row>

				{receiverType == 1 && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@h2b73j`} className={`regularRow-${receiverType}`} style={{ marginBottom: `${marginBottomValue}px` }}>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@h28i8p`} offset={offset} span={titlecol} style={{ lineHeight: '32px' }}>
						<span >{getLabel(18529, '短信内容')}: </span>
					</Col>
					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jc20ya`} span={fieldcol} style={{ marginLeft: '43px' }}>
						{((sendStatus == '1' || sendStatus == '2') && messageStatus == '0') && <div className="msg-tool"><div style={{ marginTop: '5px', display: 'inline-block' }}>{getLabel(20074, '你已输入')} {sendSmsStore.msgCount || 0} {getLabel(20075, '个字符')}</div>
							<div style={{ float: 'right', marginTop: '5px', marginRight: '20px', display: 'inline-block' }}>
								<div style={{ display: 'inline-block' }}>
									<div className="temp-btn" onClick={this.showTemp}>
										{getLabel(28049, '短信模板')}
									</div>
									<div className="temp-content" style={contentStyle}>
										<div className="arrow1" />
										<div className="arrow2" />
										<div className="temp-list">
											{sendSmsStore.groups.length > 0 &&
												<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ynnmxu`} height={120}>
													<ul>
														{
															sendSmsStore.groups.map(item => (<li onClick={this.checkTemp.bind(this, item)}>
																	<span>{item.title}</span>
																</li>))
														}
													</ul>
												</WeaNewScroll>
											}
										</div>
										<div className="temp-foot-btn" title={getLabel(611, '添加')} onClick={this.doAdd} >
											<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@5m4sj6`} type="plus-circle-o" />
										</div>
									</div>
								</div>
								<div className="icon-coms-currency setting-btn" title={getLabel(518871, '短信模板维护')} onClick={this.openTempList} />
							</div>
						</div>}
						<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@tzg9gv`} viewAttr={viewAttr} ref="textArea" minRows={8} value={msg || ''} onChange={value => this.onChange(value, 'msg')} />
					</Col>
				</Row>}
				{(sendSmsStore.showReply && receiverType == '1') &&
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0jtqd9`} className="tip-msg" style={{ marginBottom: `${marginBottomValue}px` }}>
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8js12k`} offset={offset} span={titlecol} style={{ paddingLeft: '40px', paddingTop: `${marginBottomValue}px` }} />
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0f6p8v`} span={fieldcol} style={{ marginLeft: '43px' }}>
						<div style={{ display: 'flex', display: '-webkit-flex' }}>
							<span style={{ width: '100%' }}>{getLabel(384501, '回复方法：回复 ID+R+回复内容 （ID从收到的短信中可以获得）')}</span><br />
						</div>
						<div style={{ display: 'flex', display: '-webkit-flex' }}>
							<span style={{ width: '10%' }}>{getLabel(520525, '例如：')} </span><br />
							<span style={{ width: '90%' }}> {getLabel(520523, '收到短信为：收到的消息内容(86)')} </span><br />
						</div>
						<div style={{ display: 'flex', display: '-webkit-flex' }}>
							<span style={{ width: '10%' }} />
							<span style={{ width: '90%' }}> {getLabel(520524, '回复应该为：86R 发送的消息内容')}</span>
						</div>
						</Col>
					</Row>}
			</div>
		);
	}

	getTopButtons() {
		const { loading } = this.props.sendSmsStore;
		let btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dxo8kz@sendBtn`} type="primary" disabled={loading} onClick={() => { this.onRightMenuClick(0); }}>{getLabel(2083, '发送')}</Button>];
		return btns;
	}

	onChange = (values, type) => {
		const { sendSmsStore } = this.props;
		if (type == 'msg') {
			sendSmsStore.setMsg(values);
		} else if (type == 'regularDateTime') {
			sendSmsStore.setRegularDateTime(values);
		} else if (type == 'receiverNumber') {
			sendSmsStore.setReceiverNumber(values);
		} else {
			this.setState({ [type]: values });
		}
	}

	onChangeBrowser = (ids, names, datas, type) => {
		const { sendSmsStore } = this.props;
		sendSmsStore.setCrm(ids, datas);
	}

	checkTemp = (item) => {
		const { sendSmsStore } = this.props;
		this.refs.textArea.setValue(item.content);
	}

	doAdd = (e) => {
		const { smsTempStore: { showTempDataAndMsg, setDataId } } = this.props;
		setDataId('');
		showTempDataAndMsg();
		e.stopPropagation();
	}

	openTempList = () => {
		const { sendSmsStore, smsTempStore } = this.props;
		smsTempStore.doLoading();
		sendSmsStore.openTempList();
	}

	showTemp = () => {
		this.setState({ showAddBtn: true });
		if (this.state.showTemp) {
			this.setState({ showTemp: false });
		} else {
			this.setState({ showTemp: true });
		}
	}

	pageClick = () => {
		if (this.state.clickFlag) {
			if (this.state.showTemp) {
				this.setState({ showTemp: false });
			}
		}
		this.setState({ clickFlag: true });
	}

	tempClick = (e) => {
		e.stopPropagation();
	}

	doRefresh = () => {
		const { sendSmsStore } = this.props;
		sendSmsStore.getOptions();
	}

	doClose = () => {
		this.props.doClose && this.props.doClose();
	}
}

export default ViewRegularMemberInfo;
